<template>
  <div class="statistic">
    <el-row class="box_row_1">
      <el-col :span="12">
        <!-- 药品类别饼状图 -->
        <div ref="medicineTypePieChart" class="medicineTypePieChart"></div>
      </el-col>
      <el-col :span="12">
        <!-- 员工采购饼状图 -->
        <div ref="employeePurchasePieChart" class="employeePurchasePieChart"></div>
      </el-col>
    </el-row>
    <el-row class="box_row_2">
      <el-col :span="12">
        <!-- 药品属性饼状图 -->
        <div ref="medicineAttributePieChart" class="medicineAttributePieChart"></div>
      </el-col>
      <el-col :span="12">
        <!-- 员工采购饼状图 -->
        <div ref="employeeDeliverPieChart" class="employeeDeliverPieChart"></div>
      </el-col>
    </el-row>
  </div>  
</template>

<script>
const echarts = require('echarts');
export default {
  name: 'Statistic',

  data() {
    return {
      medicineTypePieData: [],
      employeePurchasePieData: [],
      medicineAttributePieData: [],
      employeeDeliverPieData: [],
    }
  },
  methods: {
        /* 初始化药品类别饼状图 */
        async initMedicineTypePieChart() {

            const { data: res } = await this.$http.get('settings/chart/initMedicineTypePieChart.do')
            if (res.code == '1') {
                this.medicineTypePieData = res.others

            } else {
                this.$message.error(res.message)
            }

            let myMedicineTypePieChart = echarts.init(this.$refs.medicineTypePieChart)

            let option = {
                title: {
                    text: '药品类别分布表',
                    subtext: 'MedicineType Distribution Tables',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                    name: '药品类别分布表',
                    type: 'pie',
                    radius: '50%',
                    data: this.medicineTypePieData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            }

            myMedicineTypePieChart.setOption(option)
        },

        /* 初始化药品属性饼状图 */
        async initMedicineAttributePieChart() {

            const { data: res } = await this.$http.get('settings/chart/initMedicineAttributePieChart.do')
            if (res.code == '1') {
                this.medicineAttributePieData = res.others

            } else {
                this.$message.error(res.message)
            }

            let myMedicineAttributePieChart = echarts.init(this.$refs.medicineAttributePieChart)

            let option = {
                title: {
                    text: '药品属性分布表',
                    subtext: 'MedicineTAttribute Distribution Tables',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:['#ff7979', '#ffbe76', '#badc58','#34ace0'],
                series: [
                    {
                    name: '药品属性分布表',
                    type: 'pie',
                    radius: '50%',
                    /* data: [
                      { value: 10, name: '捐赠' },
                      { value: 3, name: '非捐赠' },
                      { value: 4, name: '医保' },
                      { value: 13, name: '非医保' },
                    ], */
                    data: this.medicineAttributePieData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            }

            myMedicineAttributePieChart.setOption(option)
        },

        /* 初始化员工采购饼状图 */
        async initEmployeePurchasePieChart() {

            const { data: res } = await this.$http.get('settings/chart/initEmployeePurchasePieChart.do')
            if (res.code == '1') {
              this.employeePurchasePieData = res.others

            } else {
                this.$message.error(res.message)
            }

            let myEmployeePurchasePieChart = echarts.init(this.$refs.employeePurchasePieChart)

            let option = {
                title: {
                    text: '员工采购分布表',
                    subtext: 'EmployeePurchase Distribution Tables',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:['#ffbe76','#34ace0'],
                series: [
                    {
                    name: '员工采购分布表',
                    type: 'pie',
                    radius: '50%',
                    data: this.employeePurchasePieData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            }

            myEmployeePurchasePieChart.setOption(option)
        },

        /* 初始化员工出库饼状图 */
        async initEmployeeDeliverPieChart() {

            const { data: res } = await this.$http.get('settings/chart/initEmployeeDeliverPieChart.do')
            if (res.code == '1') {
              this.employeeDeliverPieData = res.others

            } else {
                this.$message.error(res.message)
            }

            let myEmployeeDeliverPieChart = echarts.init(this.$refs.employeeDeliverPieChart)

            let option = {
                title: {
                    text: '员工出库分布表',
                    subtext: 'EmployeeDeliver Distribution Tables',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                color:['#16a085','#e67e22'],
                series: [
                    {
                    name: '员工出库分布表',
                    type: 'pie',
                    radius: '50%',
                    /* data: [
                      { value: 10, name: '小李' },
                      { value: 33, name: '小郑' },
                      { value: 23, name: '老王' },
                    ], */
                    data: this.employeeDeliverPieData,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                    }
                ]
            }

            myEmployeeDeliverPieChart.setOption(option)
        },

    },
    mounted () {
        /* 初始化药品类别饼状图 */
        this.initMedicineTypePieChart()
        /* 初始化药品属性饼状图 */
        this.initMedicineAttributePieChart()
        /* 初始化员工采购饼状图 */
        this.initEmployeePurchasePieChart()
        /* 初始化员工出库饼状图 */
        this.initEmployeeDeliverPieChart()

        
    }
}
</script>

<style scoped>
.statistic {
  height: 100%;
  padding: 20px;
}
/* 药品饼状图 */
.medicineTypePieChart,.medicineAttributePieChart,.employeePurchasePieChart,.employeeDeliverPieChart {
  height: 305px;
}
</style>
